<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>jsTree documentation</title>
	<style type="text/css">
	html, body { padding:0; margin:0; background:white; }
	body, input, th, td, select, option { font-family:"Trebuchet MS",Verdana,Helvetica,Arial,sans-serif !important; font-size:62.5%; color:black; }
	#container { width:800px; margin:0 auto; }
	h1 { background:#1B3A6D; color:white; font-size:1.6em; margin:10px 0 1px 0; padding:0 0 0 1em; letter-spacing:0; line-height:25px; font-weight:normal; border-radius:5px; -moz-border-radius:5px; }
	h2 { background:#E2EDF4; color:#1B3A6D; font-size:11pt; margin:0 0 0.5em 0; padding:0 0 0 1em; letter-spacing:0; line-height:25px; font-weight:normal; border-radius:5px; -moz-border-radius:5px; overflow:hidden; }
	h3 { background:gray; color:white; font-size:11pt; margin:1.5em 0 1px 0; padding:0 0 0 1em; letter-spacing:0; line-height:25px; font-weight:normal; border-radius:5px; -moz-border-radius:5px; overflow:hidden; }
	pre, p { font-size:10pt; line-height:1.6em; padding:0 1em; margin:0 0 0.5em 0; }
	pre, code { font-size:10pt; }
	.fp { color:navy; }
	.type { color:green; }
	h2 span { float:left; line-height:25px; }
	h2 em { float:right; width:200px; font-size:10pt; line-height:25px; color:gray; margin:0; padding:0; font-style:none; }
	h2 em code { padding:0 5px; }
	.arguments { margin-bottom:10px; }
	.arguments p { margin-bottom:0; }
	.arguments strong, .arguments code { display:block; }
	.arguments .inner_description { display:block; }
	.arguments ul { list-style-type:none; }
	.arguments code { display:inline; float:none; margin:0; }
	.arguments li p { padding:0; }
	.indent { margin-left:50px; }

	@media print { 
		#container { width:auto; margin:0 1em; }
		h1, h2, h3 { page-break-after:avoid; }
	}
	</style>
</head>
<body>
	<div id="container">
		<p style="line-height:20px; margin-top:10px; color:gray;">Go to: <a href="#creating">Creating an instance</a> | <a href="#configuration">Configuration</a> | <a href="#datastores">Datastores</a> | <a href="#api">API</a></p>
		<h1>Using jsTree</h1>
		<div class="content">
		<h2>Including the files</h2>
		<p>First of all, as jsTree is a <a href="http://jquery.com">jQuery</a> component, you need to include jQuery itself. Currently jsTree uses version 1.3.2 (the latest as of 14.Sept.2009)</p>
		<p><code class="fp">&lt;script type=&quot;text/javascript&quot; src=&quot;</code><code class="type">source/lib/jquery.js</code><code class="fp">&quot;&gt;&lt;/script&gt;</code></p>
		<p>Then you need to include jsTree:</p>
		<p><code class="fp">&lt;script type=&quot;text/javascript&quot; src=&quot;</code><code class="type">source/jquery.tree.js</code><code class="fp">&quot;&gt;&lt;/script&gt;</code></p>

		<p>Or you could use the minified version:</p>
		<p><code class="fp">&lt;script type=&quot;text/javascript&quot; src=&quot;</code><code class="type">source/jquery.tree.min.js</code><code class="fp">&quot;&gt;&lt;/script&gt;</code></p>

		<p>You may change the path to whatever you like, but <strong>it is recommended not to rename <code class="type">jquery.tree.js</code> or <code class="type">jquery.tree.min.js</code></strong> as the filenames are used in path autodetection. If you decide to rename them make sure you set the <code class="fp">theme_path</code> config option, so that jsTree succesfully includes your chosen theme (you also MUST set this option if you decide to move the folder of your chosen theme out of <code class="type">jstree-location/themes/</code>).</p>

		<p>Additionally you may decide to include some of the plugins from the <code class="type">plugins/</code> folder. If you do that the first time you open a page the plugin you loaded will alert you about missing dependancies - they can all be found <code class="type">lib/</code> folder.</p>

		<h2 style="margin-top:2em;" id="creating">Creating an instance</h2>
		<p>You can create an instance in one of two ways. Make sure that you do not use an <code class="fp">&lt;ul&gt;</code> node for the container node.</p>
		<h3 style="margin-top:0;">Method 1:</h3>
		<p><code class="fp">jQuery("selector-to-container-node-here").tree( options <sup>*</sup> );</code></p>
		<p>* You may pass the configuration options as a parameter to the <code class="fp">tree()</code> function. Detailed information about configuring can be found below.</p>
		<p>If you use this method, to get the address the instance you just created use this code:</p>
		<p><code class="fp">jQuery.tree.reference( selector <sup>*</sup> );</code></p>
		<p>* Selector can be: the ID of the container node, the ID of any contained DOM element, an actual DOM element contained within the tree, or a jQuery extended DOM node container within the tree</p>

		<h3>Method 2:</h3>
		<p><code class="fp">var your-tree-var = jQuery.tree.create();<br />your-tree-var.init( options <sup>*</sup> )</code></p>
		<p>* You may pass the configuration options as a parameter to the <code class="fp">init()</code> function. Detailed information about configuring can be found below.</p>
		<p>If you use this method, the <code class="fp">your-tree-var</code> is a reference to the instance. You can still use <code class="fp">jQuery.tree.reference()</code>. A note regarding IE8 - it has been known to cause some trouble if you use <code class="fp">tree</code> as variable name, so please don't.</p>

		</div>
		<h1 id="configuration">Configuration</h1>
		<div class="content">
		<p>The object storing all default values for newly created instances can be found in <code class="fp">jQuery.tree.defaults</code>. If you extend or modify the object, all instances created after the modification will use the modified object as default settings. When configuring an instance only pass those values, that are different from the defaults.</p>

		<h2 id="data">
			<span>data</span>
			<em><code class="type">Object</code></em>
		</h2>
		<p class="description">This section of the config stores all data source related settings.</p>

		<div class="indent">
			<h2 id="data.async">
				<span>data.async</span>
				<em><code class="type">Boolean</code></em>
			</h2>
			<p class="description">If this is set to <code class="fp">true</code> a request will be made each time a closed node is opened, and its data is not yet loaded.</p>
			<p class="description">Default is <code class="fp">false</code>.</p>

			<h2 id="data.type">
				<span>data.type</span>
				<em><code class="type">String</code></em>
			</h2>
			<p class="description">A string specifying one of the included datastores (<code class="fp">"html"</code> and <code class="fp">"json"</code> are in the main source file (<code class="type">jquery.tree.js</code>) and <code class="fp">"xml_flat"</code> and <code class="fp">"xml_nested"</code> are available in the <code class="type">plugins/</code> directory).</p>
			<p class="description">Default is <code class="fp">"html"</code>.</p>

			<h2 id="data.opts">
				<span>data.opts</span>
				<em><code class="type">Object</code></em>
			</h2>
			<p class="description">An object specifying all the options for the chosen datastore.</p>
			<p class="description">Default is <code class="fp">{ method: "GET", url: false }</code>.</p>

			<div class="indent">
				<h2 id="data.opts.method">
					<span>data.opts.method</span>
					<em><code class="type">String</code></em>
				</h2>
				<p class="description">The method used when querying the server for data. Either <code class="fp">"GET"</code> or <code class="fp">"POST"</code>. Keep in mind that while all included datastore plugins respect this setting, other third party datastore plugins may choose not to.</p>
				<p class="description">Default is <code class="fp">"GET"</code>.</p>
			</div>
			<div class="indent">
				<h2 id="data.opts.url">
					<span>data.opts.url</span>
					<em><code class="type">String</code></em>
				</h2>
				<p class="description">The URL used when querying the server for data. You may specify GET parameters here, or use the <code class="fp">beforedata</code> callback.</p>
				<p class="description">Default is <code class="fp">false</code>.</p>
			</div>
		</div>

		<h2 id="config.selected">
			<span>selected</span>
			<em><code class="type">mixed</code></em>
		</h2>
		<p class="description">A single node ID, or a list of node IDs to be initially selected when the tree first loads. Either a <code class="type">String</code>, an <code class="type">Array</code> or <code class="fp">false</code>.</p>
		<p class="description">Default is <code class="fp">false</code>.</p>

		<h2 id="opened">
			<span>opened</span>
			<em><code class="type">Array</code></em>
		</h2>
		<p class="description">An array of node IDs to be initially opened when the tree first loads.</p>
		<p class="description">Default is <code class="fp">[]</code>.</p>

		<h2 id="languages">
			<span>languages</span>
			<em><code class="type">Array</code></em>
		</h2>
		<p class="description">An array of string values, each one representing a language. Keep in mind those string will be used internally for CSS classes, so each string must be a valid CSS classname (a safe approach is to use typical language codes <code class="fp">"en"</code>, <code class="fp">"de"</code>, etc).</p>
		<p class="description">Default is <code class="fp">[]</code>.</p>

		<h2 id="ui">
			<span>ui</span>
			<em><code class="type">Object</code></em>
		</h2>
		<p class="description">This section of the config stores various user interface related settings.</p>

		<div class="indent">
			<h2 id="ui.dots">
				<span>ui.dots</span>
				<em><code class="type">Boolean</code></em>
			</h2>
			<p class="description">Should the tree have guiding dots or not.</p>
			<p class="description">Default is <code class="fp">true</code>.</p>

			<h2 id="ui.animation">
				<span>ui.animation</span>
				<em><code class="type">Integer</code></em>
			</h2>
			<p class="description">The duration in milliseconds of the open/close animation.</p>
			<p class="description">Default is <code class="fp">0</code> (meaning no animation).</p>

			<h2 id="ui.scroll_spd">
				<span>ui.scroll_spd</span>
				<em><code class="type">Integer</code></em>
			</h2>
			<p class="description">When dragging near the edge of the tree container it scrolls if neccessary. This setting controls the speed of the scroll.</p>
			<p class="description">Default is <code class="fp">4</code>.</p>

			<h2 id="ui.selected_parent_close">
				<span>ui.selected_parent_close</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">This option specifies the behavior of the tree when a parent of a selected node is closed. The options are <code class="fp">"select_parent"</code> - which deselects the selected node and selects the closed one (similar to windows explorer), <code class="fp">"deselect"</code> - only deselects the selected node or <code class="fp">false</code> - does nothing.</p>
			<p class="description">Default is <code class="fp">"select_parent"</code>.</p>

			<h2 id="ui.selected_delete">
				<span>ui.selected_delete</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">This option specifies the behavior of the tree when a selected node is deleted. The options are <code class="fp">"select_previous"</code> - which selects the previous node (similar to windows explorer) or <code class="fp">false</code> - does nothing.</p>
			<p class="description">Default is <code class="fp">"select_previous"</code>.</p>

			<h2 id="ui.theme_path">
				<span>ui.theme_path</span>
				<em><code class="type">String</code></em>
			</h2>
			<p class="description">The folder where jsTree's themes are located. If this is set to false, jsTree will autodetect the folder using its own folder location and appending <code class="type">themes/</code> at the end.</p>
			<p class="description">Default is <code class="fp">false</code> (meaning autodetect).</p>

			<h2 id="ui.theme_name">
				<span>ui.theme_name</span>
				<em><code class="type">String</code></em>
			</h2>
			<p class="description">The theme to use. If set to <code class="fp">false</code> no theme is loaded.</p>
			<p class="description">Default is <code class="fp">"default"</code>.</p>
		</div>

		<h2 id="types">
			<span>types</span>
			<em><code class="type">Object</code></em>
		</h2>
		<p class="description">This section of the config stores all defined node types and their possible interactions. Each setting (except for <code class="fp">icon</code>) may be set to a function - if so whenever a user interaction is evaluated this function will be invoked and will receive two arguments - the node that is being checked and the tree instance. In any new types you define you may only supply the rules that are different from the default type.</p>
		<p class="description">By default only the <code class="fp">"default"</code> node type is defined:</p>
<pre class="fp">
{
	"default" : {
		clickable	: true,
		renameable	: true,
		deletable	: true,
		creatable	: true,
		draggable	: true,
		max_children	: -1,
		max_depth	: -1,
		valid_children	: "all",

		icon : {
			image : false,
			position : false
		}
	}
}
</pre>
		<div class="indent">
			<h2 id="type.clickable">
				<span>type.clickable</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">Are nodes of this type clickable. <code class="type">Boolean</code> or <code class="type">Function</code>.</p>

			<h2 id="type.renameable">
				<span>type.renameable</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">Are nodes of this type renameable. <code class="type">Boolean</code> or <code class="type">Function</code>.</p>

			<h2 id="type.deletable">
				<span>type.deletable</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">Are nodes of this type deletable. <code class="type">Boolean</code> or <code class="type">Function</code>.</p>

			<h2 id="type.creatable">
				<span>type.creatable</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">Can new nodes be created in nodes of that type. <code class="type">Boolean</code> or <code class="type">Function</code>.</p>

			<h2 id="type.draggable">
				<span>type.draggable</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">Are nodes of this type draggable. <code class="type">Boolean</code> or <code class="type">Function</code>.</p>

			<h2 id="type.max_children">
				<span>type.max_children</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">The maximum number of direct children allowed in this type of node. <code class="fp">-1</code> means unlimited amount of direct children, <code class="fp">0</code> means no children are allowed, <code class="fp">1</code> means maximum one child is allowed, etc. <code class="type">Integer</code> or <code class="type">Function</code>.</p>

			<h2 id="type.max_depth">
				<span>type.max_depth</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">The maximum number of levels below this type of node. <code class="fp">-1</code> means unlimited amount of levels, <code class="fp">0</code> means no children are allowed, <code class="fp">1</code> means maximum one level is allowed, etc. <code class="type">Integer</code> or <code class="type">Function</code>.</p>

			<h2 id="type.valid_children">
				<span>type.valid_children</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">Types of nodes allowed inside this type of node. Can be an <code class="type">Array</code> of string values (one for each allowed type), if set to <code class="type">String</code> <code class="fp">"all"</code> nodes of any type can be children of a nodes of this type. Can also be a <code class="type">Function</code></p>

			<h2 id="type.icon">
				<span>type.icon</span>
				<em><code class="type">Object</code></em>
			</h2>
			<p class="description">An optional configuration of the icon used for that node type. If using a sprite (a big image with a lot of icons in it) define the <code class="fp">image</code> property on the <code class="fp">"default"</code> node type and for all other types just define the <code class="fp">position</code> property. Keep in mind IE6 is not supported (internally this uses a <code class="fp">node[attribute=value] &gt; node</code> selector).</p>
			<p class="description">Default is: <code class="fp">{ image : false, position : false }</code>, which means the icon is defined in the theme.</p>
		</div>

		<h2 id="rules">
			<span>rules</span>
			<em><code class="type">Object</code></em>
		</h2>
		<p class="description">This section is for defining a few rules for the whole tree.</p>
		
		<div class="indent">
			<h2 id="rules.multiple">
				<span>rules.multiple</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">This controls multiple selection. Can be either <code class="fp">false</code> - multiple selection is off, <code class="fp">"ctrl"</code> - multiple selection is on when the Ctrl key is held down or <code class="fp">"on"</code> - multiple selection is always on.</p>
			<p class="description">Default is: <code class="fp">"ctrl"</code></p>

			<h2 id="rules.multitree">
				<span>rules.multitree</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">This controls accepting nodes from other trees. Can be either <code class="fp">"none"</code> - will not accept any nodes from any tree, <code class="fp">"all"</code> - will accept from any tree or <code class="type">Array</code> - an array of strings, each one representing the ID of the container of a tree to accept from.</p>
			<p class="description">Default is: <code class="fp">"none"</code></p>

			<h2 id="rules.type_attr">
				<span>rules.type_attr</span>
				<em><code class="type">String</code></em>
			</h2>
			<p class="description">The attribute to read the type of the node from.</p>
			<p class="description">Default is: <code class="fp">"rel"</code></p>

			<h2 id="rules.createat">
				<span>rules.createat</span>
				<em><code class="type">String</code></em>
			</h2>
			<p class="description">Specifies the default location to insert new nodes at - at the top amongst the parent node's children or at the bottom. Also controls what happens if a node is dropped onto another node. Should be either <code class="fp">"top"</code> or <code class="fp">"bottom"</code>.</p>
			<p class="description">Default is: <code class="fp">"bottom"</code></p>

			<h2 id="rules.drag_copy">
				<span>rules.drag_copy</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">This controls how to copy when dragging. Can be either <code class="fp">false</code> - when the user drags a move is always performed, <code class="fp">"ctrl"</code> - a copy is made if the Ctrl key is held down or <code class="fp">"on"</code> - the drag always results in a copy.</p>
			<p class="description">Default is: <code class="fp">"ctrl"</code></p>

			<h2 id="rules.drag_button">
				<span>rules.drag_button</span>
				<em><code class="type">String</code></em>
			</h2>
			<p class="description">This controls which button initiates a drag. Can be either <code class="fp">"left"</code>, <code class="fp">"right"</code> or <code class="fp">"both"</code>.</p>
			<p class="description">Default is: <code class="fp">"left"</code></p>

			<h2 id="rules.use_max_children">
				<span>rules.use_max_children</span>
				<em><code class="type">Boolean</code></em>
			</h2>
			<p class="description">Should max_children rules be checked when moving/copying nodes.</p>
			<p class="description">Default is: <code class="fp">true</code></p>

			<h2 id="rules.use_max_depth">
				<span>rules.use_max_depth</span>
				<em><code class="type">Boolean</code></em>
			</h2>
			<p class="description">Should max_depth rules be checked when moving/copying nodes.</p>
			<p class="description">Default is: <code class="fp">true</code></p>

			<h2 id="rules.max_children">
				<span>type.max_children</span>
				<em><code class="type">Integer</code></em>
			</h2>
			<p class="description">The maximum number of root nodes allowed. <code class="fp">-1</code> means unlimited amount of root nodes, <code class="fp">1</code> means maximum one root node is allowed, etc.</p>
			<p class="description">Default is: <code class="fp">-1</code></p>

			<h2 id="rules.max_depth">
				<span>type.max_depth</span>
				<em><code class="type">Integer</code></em>
			</h2>
			<p class="description">The maximum number of levels. <code class="fp">-1</code> means unlimited amount of levels, <code class="fp">1</code> means maximum one level is allowed, etc.</p>
			<p class="description">Default is: <code class="fp">-1</code></p>

			<h2 id="rules.valid_children">
				<span>type.valid_children</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">Types of nodes allowed as root nodes. Can be an <code class="type">Array</code> of string values (one for each allowed type), if set to <code class="type">String</code> <code class="fp">"all"</code> nodes of any type can be root nodes.</p>
			<p class="description">Default is: <code class="fp">"all"</code></p>
		</div>

		<h2 id="lang">
			<span>langs</span>
			<em><code class="type">Object</code></em>
		</h2>
		<p class="description">This section of the config stores various settings related to languages.</p>

		<div class="indent">
			<h2 id="lang.new_node">
				<span>lang.new_node</span>
				<em><code class="type">mixed</code></em>
			</h2>
			<p class="description">The default name for newly created nodes (if the new name is not specified on creation). Can be a <code class="type">String</code> or an <code class="type">Array</code> of strings for each defined language. If you use multiple languages but set this to a single string - it will be used in all languages.</p>
			<p class="description">Default is <code class="fp">"New folder"</code>.</p>

			<h2 id="lang.loading">
				<span>lang.loading</span>
				<em><code class="type">String</code></em>
			</h2>
			<p class="description">The string displayed when loading content from the server.</p>
			<p class="description">Default is <code class="fp">"Loading ..."</code>.</p>
		</div>

		<h2 id="config.callback">
			<span>callback</span>
			<em><code class="type">Object</code></em>
		</h2>
		<p class="description">This section is for defining all callback functions which fire on various events.</p>

		<div class="indent">
			<h2 id="callback.beforechange">
				<span>callback.beforechange</span>
				<em>Should return: <code class="type">Boolean</code></em>
			</h2>
			<p class="description">Triggered before selection changes. Receives two parameters - the node involved in the event and a reference to the tree instance. If <code class="fp">false</code> is returned selection is not changed.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { return true }</code></p>

			<h2 id="callback.beforeopen">
				<span>callback.beforeopen</span>
				<em>Should return: <code class="type">Boolean</code></em>
			</h2>
			<p class="description">Triggered before opening a node. Receives two parameters - the node about to be opened and a reference to the tree instance. If <code class="fp">false</code> is returned the node is not opened.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { return true }</code></p>

			<h2 id="callback.beforeclose">
				<span>callback.beforeclose</span>
				<em>Should return: <code class="type">Boolean</code></em>
			</h2>
			<p class="description">Triggered before closing a node. Receives two parameters - the node about to be closed and a reference to the tree instance. If <code class="fp">false</code> is returned the node is not closed.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { return true }</code></p>

			<h2 id="callback.beforemove">
				<span>callback.beforemove</span>
				<em>Should return: <code class="type">Boolean</code></em>
			</h2>
			<p class="description">Triggered before moving a node. Receives four parameters - the node about to be moved, the reference node in the move, the new position relative to the reference node (one of <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>) and a reference to the tree instance. If <code class="fp">false</code> is returned the node is not moved.</p>
			<p class="description">Default is: <code class="fp">function(NODE, REF_NODE, TYPE, TREE_OBJ) { return true }</code></p>

			<h2 id="callback.beforecreate">
				<span>callback.beforecreate</span>
				<em>Should return: <code class="type">Boolean</code></em>
			</h2>
			<p class="description">Triggered before creating a node. Receives four parameters - the node about to be created, the reference node in the creation, the new position relative to the reference node (one of <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>) and a reference to the tree instance. If <code class="fp">false</code> is returned the node is not created.</p>
			<p class="description">Default is: <code class="fp">function(NODE, REF_NODE, TYPE, TREE_OBJ) { return true }</code></p>

			<h2 id="callback.beforerename">
				<span>callback.beforerename</span>
				<em>Should return: <code class="type">Boolean</code></em>
			</h2>
			<p class="description">Triggered before renaming a node. Receives three parameters - the node about to be renamed, the current language and a reference to the tree instance. If <code class="fp">false</code> is returned the node is not renamed.</p>
			<p class="description">Default is: <code class="fp">function(NODE, LANG, TREE_OBJ) { return true }</code></p>

			<h2 id="callback.beforedelete">
				<span>callback.beforedelete</span>
				<em>Should return: <code class="type">Boolean</code></em>
			</h2>
			<p class="description">Triggered before deleting a node. Receives two parameters - the node about to be deleted and a reference to the tree instance. If <code class="fp">false</code> is returned the node is not deleted.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { return true }</code></p>

			<h2 id="callback.beforedata">
				<span>callback.beforedata</span>
				<em>Should return: <code class="type">Object</code></em>
			</h2>
			<p class="description">Used for passing custom parameters to the server. Receives two parameters - a node (if applicable) and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { return { id : $(NODE).attr("id") || 0 } }</code></p>

			<h2 id="callback.ondata">
				<span>callback.ondata</span>
				<em>Should return: <code class="type">mixed</code></em>
			</h2>
			<p class="description">Used for modifying the data received from the server before parsing it.</p>
			<p class="description">Default is: <code class="fp">function(DATA, TREE_OBJ) { return DATA; }</code></p>

			<h2 id="callback.onparse">
				<span>callback.onparse</span>
				<em>Should return: <code class="type">String</code></em>
			</h2>
			<p class="description">Used for modifying the HTML about to be inserted in the DOM before actually inserting it.</p>
			<p class="description">Default is: <code class="fp">function(STR, TREE_OBJ) { return STR; }</code></p>

			<h2 id="callback.onhover">
				<span>callback.onhover</span>
			</h2>
			<p class="description">Triggered when a node is hovered. Receives two parameters - the hovered node and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { }</code></p>

			<h2 id="callback.onselect">
				<span>callback.onselect</span>
			</h2>
			<p class="description">Triggered when a node is selected. Receives two parameters - the selected node and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { }</code></p>

			<h2 id="callback.ondeselect">
				<span>callback.ondeselect</span>
			</h2>
			<p class="description">Triggered when a node is deselected. Receives two parameters - the deselected node and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { }</code></p>

			<h2 id="callback.onchange">
				<span>callback.onchange</span>
			</h2>
			<p class="description">Triggered when selection is changed in any way (select or deselect). Receives two parameters - the node involved  and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { }</code></p>

			<h2 id="callback.onrename">
				<span>callback.onrename</span>
			</h2>
			<p class="description">Triggered when a node is renamed. Receives three parameters - the renamed node, a reference to the tree instance and a rollback object that you can use with <code class="fp">jQuery.tree.rollback</code>.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ, RB) { }</code></p>

			<h2 id="callback.onmove">
				<span>callback.onmove</span>
			</h2>
			<p class="description">Triggered when a node is moved. Receives five parameters - the node that was moved, the reference node in the move, the new position relative to the reference node (one of <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>), a reference to the tree instance and a rollback object that you can use with <code class="fp">jQuery.tree.rollback</code>.</p>
			<p class="description">Default is: <code class="fp">function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) { }</code></p>

			<h2 id="callback.oncopy">
				<span>callback.oncopy</span>
			</h2>
			<p class="description">Triggered when a node is copied. Receives five parameters - the node that was copied, the reference node in the copy, the new position relative to the reference node (one of <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>), a reference to the tree instance and a rollback object that you can use with <code class="fp">jQuery.tree.rollback</code>.</p>
			<p class="description">Default is: <code class="fp">function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) { }</code></p>

			<h2 id="callback.oncreate">
				<span>callback.oncreate</span>
			</h2>
			<p class="description">Triggered when a node is created. Receives five parameters - the node that was created, the reference node in the create operation, the new position relative to the reference node (one of <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>), a reference to the tree instance and a rollback object that you can use with <code class="fp">jQuery.tree.rollback</code>.</p>
			<p class="description">Default is: <code class="fp">function(NODE, REF_NODE, TYPE, TREE_OBJ, RB) { }</code></p>

			<h2 id="callback.ondelete">
				<span>callback.ondelete</span>
			</h2>
			<p class="description">Triggered when a node is deleted. Receives three parameters - the node that was deleted, a reference to the tree instance and a rollback object that you can use with <code class="fp">jQuery.tree.rollback</code>.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ, RB) { }</code></p>

			<h2 id="callback.onopen">
				<span>callback.onopen</span>
			</h2>
			<p class="description">Triggered when a node is opened. Receives two parameters - the node that was opened and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { }</code></p>

			<h2 id="callback.onopen_all">
				<span>callback.onopen_all</span>
			</h2>
			<p class="description">Triggered when a <code class="fp">open_all</code> operation completes. Receives one parameter - a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(TREE_OBJ) { }</code></p>

			<h2 id="callback.onclose">
				<span>callback.onclose</span>
			</h2>
			<p class="description">Triggered when a node is closed. Receives two parameters - the node that was closed and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ) { }</code></p>

			<h2 id="callback.onclose_all">
				<span>callback.onclose_all</span>
			</h2>
			<p class="description">Triggered when a <code class="fp">close_all</code> operation completes. Receives one parameter - a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(TREE_OBJ) { }</code></p>

			<h2 id="callback.error">
				<span>callback.error</span>
			</h2>
			<p class="description">Triggered when an error occurs. Receives two parameters - the error string and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(TEXT, TREE_OBJ) { }</code></p>

			<h2 id="callback.ondblclk">
				<span>callback.ondblclk</span>
			</h2>
			<p class="description">Triggered when a node is doubleclicked. Receives two parameters - the node that was doubleclicked and a reference to the tree instance.</p>
			<p class="description">Default is:</p>
<pre class="fp">
function(NODE, TREE_OBJ) { 
	TREE_OBJ.toggle_branch.call(TREE_OBJ, NODE);
	TREE_OBJ.select_branch.call(TREE_OBJ, NODE);
}
</pre>

			<h2 id="callback.onrgtclk">
				<span>callback.onrgtclk</span>
			</h2>
			<p class="description">Triggered when a node is rightclicked. Receives three parameters - the node that was rightclicked, a reference to the tree instance and the event object. To prevent the browser menu use:</p>
<pre class="fp">
function(NODE, TREE_OBJ, EV) { 
	EV.preventDefault(); 
	EV.stopPropagation(); 
	return false; 
}</pre>
			<p class="description">Default is: <code class="fp">function(NODE, TREE_OBJ, EV) { }</code></p>

			<h2 id="callback.onload">
				<span>callback.onload</span>
			</h2>
			<p class="description">Triggered when the tree is loaded with data for the first time or refreshed. Receives one parameter - a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(TREE_OBJ) { }</code></p>

			<h2 id="callback.oninit">
				<span>callback.oninit</span>
			</h2>
			<p class="description">Triggered when the tree is initialized and before any data is requested or parsed. Receives one parameter - a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(TREE_OBJ) { }</code></p>

			<h2 id="callback.onfocus">
				<span>callback.onfocus</span>
			</h2>
			<p class="description">Triggered when the tree is focused. When creating a new tree it is always focused and the callback fires after <code class="fp">oninit</code>, but if a data request should be made to the server - possibly before <code class="fp">onload</code>. Receives one parameter - a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(TREE_OBJ) { }</code></p>

			<h2 id="callback.ondestroy">
				<span>callback.ondestroy</span>
			</h2>
			<p class="description">Triggered before the tree is destroyed. Receives one parameter - a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(TREE_OBJ) { }</code></p>

			<h2 id="callback.onsearch">
				<span>callback.onsearch</span>
			</h2>
			<p class="description">Triggered after a search is performed and results are ready. Receives two parameters - a jQuery collection of nodes matching the search and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(NODES, TREE_OBJ) { NODES.addClass("search"); }</code></p>

			<h2 id="callback.ondrop">
				<span>callback.ondrop</span>
			</h2>
			<p class="description">Triggered when a foreign node is dropped on the tree. Receives four parameters - the foreign node that was dropped, the reference node in the move, the new position relative to the reference node (one of <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>) and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(NODE, REF_NODE, TYPE, TREE_OBJ) { }</code></p>

			<h2 id="callback.check">
				<span>callback.check</span>
			</h2>
			<p class="description">Triggered when a node is checked for a certain rule. Receives four parameters - the rule that is checked, the node that is checked, the value computed so far (as the callback is called last - before that types are evaluated) and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(RULE,NODE,VALUE,TREE_OBJ) { return VALUE; }</code></p>

			<h2 id="callback.check_move">
				<span>callback.check_move</span>
				<em>Should return: <code class="type">Boolean</code></em>
			</h2>
			<p class="description">Triggered when a move is evaluated. Receives four parameters - the node that is moved, the reference node in the move, the new position relative to the reference node (one of <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>) and a reference to the tree instance.</p>
			<p class="description">Default is: <code class="fp">function(NODE, REF_NODE, TYPE, TREE_OBJ) { return true; }</code></p>
		</div>

		<h2 id="plugins">
			<span>plugins</span>
			<em><code class="type">Object</code></em>
		</h2>
		<p class="description">This section is for defining active plugins on the instance. Each plugin is a key in this object, and corresponding to that key is the options object for the plugin. For example:</p>
<pre class="fp">
plugins : {
	"plugin-name" : { plugin-option-one : "value", plugin-option-two : { } }
	"second-plugin" : { } <code class="type">// This just activates the plugin without modifying its defaults.</code>
}
</pre>
		<p class="description">Default is: <code class="fp">{ }</code></p>
		</div>

		<h1 id="datastores">Datastores</h1>
		<div class="content">
			<p>In this section you will find the data format description of the two bundled datasources.</p>
			<h2 id="html">HTML</h2>
			<p>The simplest of datastores. Used when you need to converted a nested list into an interactive tree. The required structure is as follows:</p>
<pre class="fp">
&lt;some-container-node&gt;
	&lt;ul&gt;
		&lt;li id=&quot;node-identificator&quot; rel=&quot;node-type&quot;&gt;
			&lt;a href=&quot;#&quot;&gt;&lt;ins&gt;&amp;nbsp;&lt;/ins&gt;Root node&lt;/a&gt;
			&lt;ul&gt;
				&lt;li id=&quot;node-identificator&quot; rel=&quot;node-type&quot;&gt;
					&lt;a href=&quot;#&quot;&gt;&lt;ins&gt;&amp;nbsp;&lt;/ins&gt;Child node&lt;/a&gt;
				&lt;/li&gt;
			&lt;/ul&gt;
		&lt;/li&gt;
	&lt;/ul&gt;
&lt;/some-container-node&gt;
</pre>
			<p>You can have whatever attributes you like in any of the elements. Also keep in mind that the node ID and type can be omitted and the node type may be stored in some other attribute if you decide to configure it (check the <code class="fp">type_attr</code> section).</p>
			<p>If you use language versions you will have multiple <code class="fp">&lt;a&gt;</code> (one for each language) elements inside any <code class="fp">&lt;li&gt;</code> element, they must have a language code (one of the codes defined in the <code class="fp">langauges</code> section of the config) for a classname. Like so:</p>
<pre class="fp">
&lt;li id=&quot;node-identificator&quot; rel=&quot;node-type&quot;&gt;
	&lt;a href=&quot;#&quot; class=&quot;en&quot;&gt;&lt;ins&gt;&amp;nbsp;&lt;/ins&gt;Title in English&lt;/a&gt;
	&lt;a href=&quot;#&quot; class=&quot;bg&quot;&gt;&lt;ins&gt;&amp;nbsp;&lt;/ins&gt;Title in Bulgarian&lt;/a&gt;
&lt;/li&gt;
</pre>
			<h2 id="json">JSON</h2>
			<p>The JSON data format is definitely the most widely used amongst jsTree users. Each node has the following structure:</p>
<pre class="fp">
{ 
	attributes: { id : "node_identificator", some-other-attribute : "attribute_value" }, 
	data: "node_title", 
	<code class="type">// Properties below are only used for NON-leaf nodes</code>
	state: "closed", <code class="type">// or "open"</code>
	children: [ <code class="type">/* an array of child nodes objects */</code> ]
}
</pre>
			<p>As you can see you can pass any attributes you like in the <code class="fp">attributes</code> object - in the resulting HTML output those attributes are bound to the <code class="fp">&lt;li&gt;</code> element. If you have a leaf node (one with no children) omit the <code class="fp">state</code> and <code class="fp">children</code> properties.</p>
			<p>If you need to specify some attributes for the <code class="fp">&lt;a&gt;</code> node in the output, or want to set a custom icon instead of a string, pass an object for the data section. Like so:</p>
<pre class="fp" style="color:silver;">
{ 
	attributes: { id : "node_identificator", some-other-attribute : "attribute_value" }, 
	<code class="fp">data: { title : "Node title", icon : "path_to/icon.pic", attributes : {"key" : "value" } }, </code>
	// Properties below are only used for NON-leaf nodes
	state: "closed", // or "open"
	children: [ /* an array of child nodes objects */ ]
}
</pre>

			<p>If language versions are used use this syntax for the data property:</p>
<pre class="fp">
data: { 
	"en" : "Title in English", 
	"bg" : "Title in Bulgarian"
}
</pre>
			<p>Or if you need icons and attributes:</p>
<pre class="fp">
data: { 
	"en" : { title : "Title in English", icon : "path_to/icon.pic", attributes : { "key" : "value" } },
	"bg" : "Title in Bulgarian"
}
</pre>
			<p>As you can see - you can mix the short and long syntax.</p>
		</div>

		<h1 id="api">API</h1>
		<div class="content">
		<h2 id="jQuery">
			<span>jQuery(selector).tree([options])</span>
			<em>Return value: <code class="type">jQuery</code></em>
		</h2>
		<p class="description">Used on a jQuery selector the tree function converts all matched elements to trees, using the options provided. If a tree already exists in one of the selected DOM nodes, it is first destroyed and then recreated using the passed options object.</p>
		<div class="arguments">
			<p>
				<strong>Arguments:</strong>
				<code class="type">object</code> <code class="fp">options</code>
			</p>
			<p class="inner_description">An optional object, specifing all the options for the tree (or trees) that will be created. This object internally extends the global defaults object. So you may only pass values that are different from the defaults.</p>
		</div>
		
		<h3>Functions and properties bound directly to the global tree object.</h3>
		<h2 id="tree.create">
			<span>jQuery.tree.create()</span>
			<em>Return value: <code class="type">jsTree</code></em> 
		</h2>
		<p class="description">Creates a new tree instance. Accepts no arguments - the configuration object is passed in a subsequest <code class="fp">init</code> call on the returned tree object.</p>

		<h2 id="tree.datastores">
			<span>jQuery.tree.datastores</span>
		</h2>
		<p class="description">This object stores all defined datastores on a global level. Every added datastore extends this object. In order to use a datastore in a tree instance, the datastore should be defined in this object.</p>
		
		<h2 id="tree.defaults">
			<span>jQuery.tree.defaults</span>
		</h2>
		<p class="description">The object storing all default values for newly created instances. If you extend or modify the object, all instances created after the modification will use the modified object as default settings. This means that you can even define plugins that should be active on all instances.</p>

		<h2 id="tree.drag_start">
			<span>jQuery.tree.drag_start</span>
			<em><code class="type">function</code></em>
		</h2>
		<p class="description">You can set this to a function - it will be called each time the user initiates a drag. You will receive the event object and a jsTree drag_drop object as parameters. Please note that you attach this callback globally and not on a specific instance. To get the instance involved in the drag start - use the <code class="fp">jQuery.tree.reference()</code> function.</p>

		<h2 id="tree.drag">
			<span>jQuery.tree.drag</span>
			<em><code class="type">function</code></em>
		</h2>
		<p class="description">You can set this to a function - it will be called each time the mousemove event is fired. You will receive the event object and a jsTree drag_drop object as parameters. Please note that you attach this callback globally and not on a specific instance. To get the instance/instances involved in the drag - use the <code class="fp">jQuery.tree.reference()</code> function.</p>

		<h2 id="tree.drag_end">
			<span>jQuery.tree.drag_end</span>
			<em><code class="type">function</code></em>
		</h2>
		<p class="description">You can set this to a function - it will be called each time the user finishes a drag. You will receive the event object and a jsTree drag_drop object as parameters. Please note that you attach this callback globally and not on a specific instance. To get the instance/instances involved in the drag - use the <code class="fp">jQuery.tree.reference()</code> function. Do not confuse with the onmove callback which will also be fired if there was a valid move.</p>

		<h2 id="tree.drop_mode">
			<span>jQuery.tree.drop_mode([options])</span>
			<em>Return value: <code class="fp">none</code></em>
		</h2>
		<p class="description">This function sets all initialized trees on the page in "drop mode", meaning that all the trees start handling mouseover events and evaluating the possible drop, and giving the user feedback.</p>
		<div class="arguments">
			<p>
				<strong>Arguments:</strong> 
				<code class="type">object</code> <code class="fp">options</code>
			</p>
			<p>An optional object, specifing a few options:</p>
			<ul>
				<li>
					<code class="type">boolean</code> <code class="fp">show</code>
					<p>Should there be a drag helper. Defaults to <code class="fp">false</code>.</p>
				</li>
				<li>
					<code class="type">string</code> <code class="fp">type</code>
					<p>The node type that should be used for the current drop when evaluating the drag rules. Defaults to <code class="fp">"default"</code>.</p>
				</li>
				<li>
					<code class="type">string</code> <code class="fp">str</code>
					<p>The text used in the drag helper. Defaults to <code class="fp">"Foreign node"</code>.</p>
				</li>
			</ul>
		</div>

		<h2 id="tree.focused">
			<span>jQuery.tree.focused()</span>
			<em>Return value: <code class="type">jsTree</code></em>
		</h2>
		<p class="description">This functions returns the currently focused tree instance.</p>

		<h2 id="jQuery.tree.plugins">
			<span>jQuery.tree.plugins</span>
		</h2>
		<p class="description">This object stores all defined plugins on a global level. Every added plugin extends this object. In order to use a specific plugin, it should be defined in this object. Only having a plugin defined here, does not mean it is activated with every instance. If you want to use a plugin with an instance you should define that in the particular instance config.</p>

		<h2 id="tree.reference">
			<span>jQuery.tree.reference(needle)</span>
			<em>Return value: <code class="type">jsTree</code></em>
		</h2>
		<p class="description">This functions returns a specific tree instance by an ID or contained node.</p>
		<div class="arguments">
			<p>
				<strong>Arguments:</strong>
				<code class="type">mixed</code> <code class="fp">needle</code>
			</p>
			<p>This can be either the instance ID (the ID of the container node), an ID of any contained DOM element, an actual DOM element contained within the tree, or a jQuery extended DOM node container within the tree.</p>
		</div>

		<h2 id="tree.rollback">
			<span>jQuery.tree.rollback(data)</span>
			<em>Return value: <code class="fp">none</code></em>
		</h2>
		<p class="description">This function performs a rollback when passed a rollback object. It sets all trees involved in the rollback to the state described in the rollback object.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong> <code class="type">object</code> <code class="fp">data</code></p>
			<p>This is a rollback object, usually obtained in a callback or by calling <code class="fp">get_rollback</code> on a specific instance.</p>
		</div>

		<h3>Functions and properties in a tree instance</h3>
		<h2 id="attach_events">
			<span>attach_events()</span>
			<em>Return value: <code class="fp">none</code></em>
		</h2>
		<p class="description">This function binds all the events required for user interaction with the tree. It only fires once at creation time. It is used internally.</p>

		<h2 id="callback">
			<span>callback(callback_name, arguments)</span>
			<em>Return value: <code class="fp">none</code></em>
		</h2>
		<p class="description">This function is used internally. It fires all callbacks.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong> <code class="type">string</code> <code class="fp">callback_name</code></p>
			<p>The callback to fire.</p>
			<p><code class="type">array</code> <code class="fp">args</code></p>
			<p>The arguments for the callback.</p>
		</div>

		<h2 id="check">
			<span>check(rule, node)</span>
			<em>Return value: <code class="type">boolean</code></em>
		</h2>
		<p class="description">Checks if a certain action is allowed on a node (for example create, delete, rename, etc) and returns <code class="fp">true</code> or <code class="fp">false</code> accordingly. Used mainly internally.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">string</code> <code class="fp">rule</code></p>
			<p>The rule you want to check.</p>
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to the node you want to check inside the tree.</p>
		</div>

		<h2 id="check_move">
			<span>check_move(node, ref_node, move_type)</span>
			<em>Return value: <code class="type">boolean</code></em>
		</h2>
		<p class="description">Checks if a certain move is allowed. Used mainly internally.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to the node that is being moved.</p>
			<p><code class="type">mixed</code> <code class="fp">ref_node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to the reference node.</p>
			<p><code class="type">string</code> <code class="fp">move_type</code></p>
			<p>One of <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>.</p>
		</div>

		<h2 id="children">
			<span>children(reference_node)</span>
			<em>Return value: <code class="type">jQuery</code></em>
		</h2>
		<p class="description">Get the child nodes of the reference node. Returns <code class="fp">false</code> on failure.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">reference_node</code></p>
			<p>The reference node. A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
		</div>

		<h2 id="close_all">
			<span>close_all([node])</span>
		</h2>
		<p class="description">Closes all nodes, so that their children are not visible. Has no return value, but returns <code class="fp">false</code> on failure (invalid node for example).</p>
		<div class="arguments"><p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>Optional argument. A DOM node, jQuery object or selector, pointing to a node inside the tree. If passed only this node and its children are closed, if not passed - every node in the tree is closed.</p>
		</div>

		<h2 id="close_branch">
			<span>close_branch(node [, disable_animation])</span>
		</h2>
		<p class="description">Close a node, so that its children are not visible. Has no return value, but returns <code class="fp">false</code> on failure (invalid node for example).</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
			<p><code class="type">boolean</code> <code class="fp">disable_animation</code></p>
			<p>Optional argument. If <code class="fp">true</code> is passed, there will be no animation regardless of the settings in the tree config.</p>
		</div>

		<h2 id="cntr">
			<span>cntr</span>
		</h2>
		<p class="description">The number of the tree. This is used internally.</p>

		<h2 id="copy">
			<span>copy([node])</span>
		</h2>
		<p class="description">Marks a node as copied. A paste operation following the copy operation will create a copy of that node. Has no return value, but returns <code class="fp">false</code> on failure (invalid node for example).</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>Optional argument - the node to be copied. A DOM node, jQuery object or selector, pointing to a node inside the tree. If omitted the currently selected node (or nodes) are marked.</p>
		</div>

		<h2 id="create">
			<span>create([data, reference_node, position])</span>
			<em>Return value:  <code class="type">jQuery</code></em>
		</h2>
		<p class="description">Create a new node. Please note this function should mainly be used for user interaction and not for populating the tree initially. Returns the newly created node or <code class="fp">false</code> on failure.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">object</code> <code class="fp">data</code></p>
			<p>Optional argument. The object follows the built in JSON structure, so you can specify name (or names if using language versions) for the newly created node, attributes, type of the node, open/closed state, etc. If omitted the new node's type is "default" and as soon as it is inserted the <code class="fp">rename</code> function is called on the node.</p>
			<p><code class="type">mixed</code> <code class="fp">reference_node</code></p>
			<p>Optional argument. A DOM node, jQuery object or selector, pointing to a node inside the tree. If <code class="fp">-1</code> is passed a new root node is created. If omitted the currently selected node is used as reference node.</p>
			<p><code class="type">mixed</code> <code class="fp">position</code></p>
			<p>Optional argument. Possible values are <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>, which mark the position relative to the reference node. An integer may also be passed - in that case the new node will be created at that specific offset among the reference node's children.</p>
		</div>

		<h2 id="current_lang">
			<span>current_lang</span>
		</h2>
		<p class="description">The language code of the currently visible language.</p>

		<h2 id="cut">
			<span>cut([node])</span>
		</h2>
		<p class="description">Marks a node as cut. A paste operation following the cut operation will move that node. Has no return value, but returns <code class="fp">false</code> on failure (invalid node for example).</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code>
			<p>Optional argument - the node to be cut. A DOM node, jQuery object or selector, pointing to a node inside the tree. If omitted the currently selected node (or nodes) are marked.</p>
		</div>

		<h2 id="deselect_branch">
			<span>deselect_branch(node)</span>
		</h2>
		<p class="description">Removes the selected state from a node in the tree. Has no return value, but returns <code class="fp">false</code> on failure (invalid node for example).</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
		</div>

		<h2 id="destroy">
			<span>destroy()</span>
		</h2>
		<p class="description">Destroys the instance.</p>

		<h2 id="error">
			<span>error(error_string)</span>
			<em>Return value: <code class="fp">false</code></em>
		</h2>
		<p class="description">All errors go through this function. Used internally.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">string</code> <code class="fp">error_string</code></p>
		</div>

		<h2 id="focus">
			<span>focus()</span>
		</h2>
		<p class="description">This function sets the current tree as the focused one in the page.</p>

		<h2 id="get">
			<span>get([node, format, options])</span>
			<em>Return value: <code class="type">mixed</code></em>
		</h2>
		<p class="description">Return the whole tree or a part of it in a given format.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree. This is the node you want returned, if this argument omitted the whole tree is returned.</p>
			<p><code class="type">string</code> <code class="fp">format</code></p>
			<p>Optional argument. The format you want the returned data in. It should be one of the defined datasources. If omitted the tree's current datasource is used.</p>
			<p><code class="type">object</code> <code class="fp">options</code></p>
			<p>Optional argument. The options for the datasource - if omitted, the tree's current options are used.</p>
		</div>

		<h2 id="get_lang">
			<span>get_lang()</span>
			<em>Return value: <code class="type">string</code></em>
		</h2>
		<p class="description">This function is only useful if language versions are used. Returns the currently visible language or <code class="fp">false</code> on failure.</p>

		<h2 id="get_node">
			<span>get_node(node)</span>
			<em>Return value: <code class="type">jQuery</code></em>
		</h2>
		<p class="description">This function returns the jQuery extended LI DOM node that represents a given tree node.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
		</div>

		<h2 id="get_rollback">
			<span>get_rollback()</span>
			<em>Return value: <code class="type">object</code></em>
		</h2>
		<p class="description">Returns a rollback object for the tree. The rollback object actually has two properties <code class="fp">html</code> (containing the HTML of the container) and <code class="fp">selected</code> (the ID of the last selected node - if there is one).</p>

		<h2 id="get_text">
			<span>get_text(node [, language])</span>
			<em>Return value: <code class="type">string</code></em>
		</h2>
		<p class="description">This function returns the title of the node passed as first parameter.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
			<p><code class="type">string</code> <code class="fp">language</code></p>
			<p>This parameter is optional and only useful if language versions are used. You may specify the language in which you want the title (it should be one of the defined languages). If you ommit this parameter the title is returned in the currently visible language.</p>
		</div>

		<h2 id="get_type">
			<span>get_type(node)</span>
			<em>Return value: <code class="type">string</code></em>
		</h2>
		<p class="description">This function returns the type of a node (types are used to determine nesting/interaction rules). The function returns <code class="fp">"default"</code> if no type attribute is found.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
		</div>

		<h2 id="hover_branch">
			<span>hover_branch(node)</span>
		</h2>
		<p class="description">Sets a node in the tree as hovered. Has no return value, but returns <code class="fp">false</code> on failure (invalid node for example).</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
		</div>

		<h2 id="init">
			<span>init(element [, config])</span>
		</h2>
		<p class="description">This function initializes a tree in the given container element, using the optional config passed as a parameter. Usually used after <code class="fp">create()</code>.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">element</code></p>
			<p>This is a DOM node, jQuery object, or a valid jQuery selector, pointing to a container element. This parameter is required.</p>
			<p><code class="type">object</code> <code class="fp">config</code></p>
			<p>An optional object, specifing all the options for the tree (or trees) that will be created. This object internally extends the global defaults object. So you may only pass values that are different from the defaults.</p>
		</div>

		<h2 id="lock">
			<span>lock(state)</span>
		</h2>
		<p class="description">Locks or unlocks the tree instance. A locked tree blocks all user interactions.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">boolean</code> <code class="fp">state</code></p>
			<p>To lock or unlock (<code class="fp">true</code> means lock).</p>
		</div>

		<h2 id="locked">
			<span>locked</span>
		</h2>
		<p class="description">A boolean indicating the lock state of the tree.</p>

		<h2 id="moved">
			<span>moved(what, where, how [, is_new, is_copy, rollback])</span>
			<em>Return value: <code class="type">jQuery</code></em>
		</h2>
		<p class="description">This function is used internally. It performs all moves and manipulates the DOM. Returns the moved node, but there is no return value if there are multiple moves to be performed or the required data is not yet loaded.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">what</code></p>
			<p>The node (or nodes) to move/copy/create. A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
			<p><code class="type">mixed</code> <code class="fp">where</code></p>
			<p>The reference node in the operation. A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
			<p><code class="type">string</code> <code class="fp">how</code></p>
			<p>One of <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>.</p>
			<p><code class="type">boolean</code> <code class="fp">is_new</code></p>
			<p>If it is a create operation.</p>
			<p><code class="type">boolean</code> <code class="fp">is_copy</code></p>
			<p>If it is a copy operation.</p>
			<p><code class="type">object</code> <code class="fp">rollback</code></p>
			<p>The rollback object created in the first call to the <code class="fp">moved</code> function.</p>
		</div>

		<h2 id="next">
			<span>next(reference_node [, strict])</span>
			<em>Return value: <code class="type">jQuery</code></em>
		</h2>
		<p class="description">Get the node next to the reference node. Returns <code class="fp">false</code> on failure.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code><code class="fp">reference_node</code></p>
			<p>The reference node. A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
			<p><code class="type">boolean</code><code class="fp">strict</code></p>
			<p>Optional argument - if set to <code class="fp">true</code> only siblings are returned (nodes within the same parent as the reference node). If not present or <code class="fp">false</code> behaves like in Windows explorer - when the last child is the reference node the next sibling of the parent node is returned.</p>
		</div>

		<h2 id="off_height">
			<span>off_height()</span>
		</h2>
		<p class="description">This function computates the offset of the tree's container node, and also the height of a single node. It is used internally.</p>

		<h2 id="open_all">
			<span>open_all([node, callback])</span>
		</h2>
		<p class="description">Open all nodes, so that their children are visible. Returns <code class="fp">false</code> on failure.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>Optional argument. A DOM node, jQuery object or selector, pointing to a node inside the tree. If passed only this node and its children are opened, if not passed - every node in the tree is opened.</p>
			<p><code class="type">function</code> <code class="fp">callback</code></p>
			<p>Optional argument. A function to be executed once the operation is complete. Used internally, if you need similiar functionality use the <code class="fp">onopen_all</code> callback.</p>
		</div>

		<h2 id="open_branch">
			<span>open_branch(node [, disable_animation, callback])</span>
			<em>Return value: <code class="type">boolean</code></em>
		</h2>
		<p class="description">Open a node, so that its children are visible. Returns <code class="fp">true</code> if succesfull, <code class="fp">false</code> if not.</p>
		<div class="arguments"><p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
			<p><code class="type">boolean</code> <code class="fp">disable_animation</code></p>
			<p>Optional argument. If <code class="fp">true</code> is passed, there will be no animation regardless of the settings in the tree config.</p>
			<p><code class="type">function</code> <code class="fp">callback</code></p>
			<p>Optional argument. A function to be executed once the operation is complete. Used internally, if you need similiar functionality use the <code class="fp">onopen</code> callback.</p>
		</div>

		<h2 id="parent">
			<span>parent(reference_node)</span>
			<em>Return value: <code class="type">mixed</code></em>
		</h2>
		<p class="description">Get the parent node of the reference node. Normally returns a <code class="type">jQuery</code> extended node, but will return <code class="fp">-1</code> if a root node is passed as reference node, or <code class="fp">false</code> on failure (invalid reference node for exmaple).</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">reference_node</code></p>
			<p>The reference node. A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
		</div>

		<h2 id="paste">
			<span>paste([node, position])</span>
		</h2>
		<p class="description">Pastes any copied or cut nodes in the new position. Has no return value, but will return <code class="fp">false</code> on failure.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>Optional argument - the reference node in the operation. A DOM node, jQuery object or selector, pointing to a node inside the tree. If omitted the currently selected node (or nodes) are marked.</p>
			<p><code class="type">mixed</code> <code class="fp">position</code></p>
			<p>Optional argument. Possible values are <code class="fp">"before"</code>, <code class="fp">"after"</code> or <code class="fp">"inside"</code>, which mark the position relative to the reference node. An integer may also be passed - in that case the node will be moved/copied at that speicific offset among the reference node's children.</p>
		</div>

		<h2 id="prev">
			<span>prev(reference_node [, strict])</span>
			<em>Return value: <code class="type">jQuery</code></em>
		</h2>
		<p class="description">Get the node previous to the reference node. Returns <code class="fp">false</code> on failure.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">reference_node</code></p>
			<p>The reference node. A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
			<p><code class="type">boolean</code> <code class="fp">strict</code></p>
			<p>Optional argument - if set to <code class="fp">true</code> only siblings are returned (nodes within the same parent as the reference node). If not present or <code class="fp">false</code> behaves like in Windows explorer - when a first child is the reference node the parent node is returned.</p>
		</div>

		<h2 id="refresh">
			<span>refresh([element])</span>
		</h2>
		<p class="description">This function refreshes the whole tree, or a given node (if passed as a parameter). Opened nodes and selected nodes are saved and reopened/reselected (the <code class="fp">reselect</code> function is used for reselecting and reopening).</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">element</code></p>
			<p>This is a DOM node, jQuery object, or a valid jQuery selector, pointing to a node in the tree. If this parameter is passed, only that node is refreshed, if this parameter is absent, the whole tree is refreshed.</p>
		</div>

		<h2 id="remove">
			<span>remove([node])</span>
		</h2>
		<p class="description">Removes a node. Has no return value, but will return <code class="fp">false</code> on failure.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>Optional argument - the node to be removed. A DOM node, jQuery object or selector, pointing to a node inside the tree. If omitted the currently selected node is removed.</p>
		</div>

		<h2 id="rename">
			<span>rename([node, new_name])</span>
		</h2>
		<p class="description">Rename a node. If language versions are used only the title in the currently visible language is modified. Has no return value, but will return <code class="fp">false</code> on failure.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>Optional argument - the node to be renamed. A DOM node, jQuery object or selector, pointing to a node inside the tree. If omitted the currently selected node is renamed.</p>
			<p><code class="type">string</code> <code class="fp">new_name</code></p>
			<p>Optional argument - the new name. If omitted - an input box is displayed.</p>
		</div>

		<h2 id="reselect">
			<span>reselect([is_callback])</span>
		</h2>
		<p class="description">This function reselects and reopens nodes in the tree after a refresh. It is used internally.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">boolean</code> <code class="fp">is_callback</code></p>
			<p>As the function sometimes calls recursively this parameter shows if this is a recursive call, or the first one.</p>
		</div>

		<h2 id="scroll_check">
			<span>scroll_check(x, y)</span>
		</h2>
		<p class="description">This function detects the need to scroll and scrolls the container (if neccessary) while the user drags a node (or nodes). It is used internally.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p>
			<p><code class="type">number</code> <code class="fp">x</code></p>
			<p>The x coordinate to check.</p>
			<p><code class="type">number</code> <code class="fp">y</code></p>
			<p>The y coordinate to check.</p>
		</div>

		<h2 id="scroll_into_view">
			<span>scroll_into_view([node])</span>
		</h2>
		<p class="description">This function scrolls the container node so that the node passed as parameter is in view. If the parameter is missing the currently selected node is used.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
		</div>

		<h2 id="search">
			<span>search(needle [, compare_function])</span>
		</h2>
		<p class="description">Searches all nodes whose titles match a given string. If async is used a request is made to the server, the response should contain the comma-separated IDs of nodes that need to be opened so that all nodes that match the search string are visible. The search string is provided in the request. The function triggers the <code class="fp">onsearch</code> callback, with the nodes found as a parameter.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">string</code> <code class="fp">needle</code></p>
			<p>The search string.</p>
			<p><code class="type">string</code> <code class="fp">compare_function</code></p>
			<p>Optional argument. The jQuery function to be used for comparing titles to the string - defaults to <code class="fp">"contains"</code>.</p>
		</div>

		<h2 id="selected">
			<span>selected</span>
		</h2>
		<p class="description">The currently selected jQuery extended node (if mutliselect is possible this holds the lastly selected node).</p>

		<h2 id="selected_arr">
			<span class="fp">selected_arr</span>
		</h2>
		<p class="description">An array of jQuery extended DOM nodes that are currently selected.</p>

		<h2 id="select_branch">
			<span>select_branch(node [, is_multiple])</span>
		</h2>
		<p class="description">Sets a node in the tree as selected. Has no return value but will return <code class="fp">false</code> on failure (invalid node for example).</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
			<p><code class="type">boolean</code> <code class="fp">is_multiple</code></p>
			<p>Optional argument. If <code class="fp">true</code> is passed, it will trigger multiselect (the previously selected node won't be deselected, but the both nodes will be selected).</p>
		</div>

		<h2 id="settings">
			<span>settings</span>
		</h2>
		<p class="description">All the settings for the current tree. You can modify some of the properties at runtime.</p>

		<h2 id="set_lang">
			<span>set_lang(lang)</span>
			<em>Return value: <code class="type">boolean</code></em>
		</h2>
		<p class="description">This function is only useful if language versions are used. Sets the current language to the specified one so that the tree is visible in that language. Returns <code class="fp">true</code> on success and <code class="fp">false</code> otherwise.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">lang</code></p>
			<p>Either one of the language strings defined in the tree's config, or its key in the array.</p>
		</div>

		<h2 id="set_type">
			<span>set_type(type [, node])</span>
		</h2>
		<p class="description">This function sets the type of a node to a given value (types are used to determine nesting/interaction rules).</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">string</code> <code class="fp">type</code></p>
			<p>The new type of the node.</p>
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree. This argument is optional - if not specified - the currently selected node is used.</p>
		</div>

		<h2 id="toggle_branch">
			<span>toggle_branch(node)</span>
			<em>Return value: <code class="type">boolean</code></em>
		</h2>
		<p class="description">Toggles the opened/closed state of the node. Returns <code class="fp">true</code> on success and <code class="fp">false</code> otherwise.</p>
		<div class="arguments">
			<p><strong>Arguments:</strong></p> 
			<p><code class="type">mixed</code> <code class="fp">node</code></p>
			<p>A DOM node, jQuery object or selector, pointing to a node inside the tree.</p>
		</div>

		<h2 id="toggle_dots">
			<span>toggle_dots()</span>
		</h2>
		<p class="description">Turns dots on or off.</p>

		<h2 id="others">
			<span>others</span>
		</h2>
		<p class="description">A few other variables may emerge at runtime, but they are only used internally, such as: <code class="fp">srch</code> , <code class="fp">srch_opn</code> , <code class="fp">hovered</code> , <code class="fp">offset</code> , <code class="fp">is_partial_refresh</code> , <code class="fp">opened</code> , <code class="fp">cl_count</code> , <code class="fp">li_height</code> , <code class="fp">inp</code>.</p>
	</div>
</div></body></html>
